<template>
  <div>
      <div class="box">
        <img :src="imgurl" alt="" />
        <p :style="{ background: colorStr }" @click="btn">{{ name }}</p>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      colorStr: ''
    }
  },
  props: ['imgurl', 'name'],
  methods: {
    btn () {
      this.colorStr = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
        Math.random() * 256
      )}, ${Math.floor(Math.random() * 256)})`
      this.$emit('sel', this.name)
      console.log(this.name)
    }
  }
}
</script>

<style scoped lang="less">
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    text-align: center;
    float: left;
  }
  img {
    width: 100%;
    height: 450px;
  }

}
</style>
